<template> 
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>仓库列表</span>
      <el-button
        class="btn-add"
        @click="handleAdd()"
        size="medium" type="primary">
        添加新仓库
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="depotTable"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                border>
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="默认显示" width="100" align="center">
          <template slot-scope="scope">{{scope.row.isDefault?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="仓库名称" width="200" align="center">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <!-- <el-table-column label="仓库地址" width="300" align="center">
          <template slot-scope="scope">{{scope.row.address}}</template>
        </el-table-column> -->
          <!-- <el-table-column label="仓储费" width="100" align="center">
            <template slot-scope="scope">{{scope.row.warehousing}}</template>
          </el-table-column>
          <el-table-column label="搬运费" width="100" align="center">
            <template slot-scope="scope">{{scope.row.truckage}}</template>
          </el-table-column> -->
        <!-- <el-table-column label="负责人" width="100" align="center">
          <template slot-scope="scope">{{scope.row.principal}}</template>
        </el-table-column> -->
        <el-table-column label="税率" width="100" align="center">
          <template slot-scope="scope">{{scope.row.taxRate}}</template>
        </el-table-column>
        <el-table-column label="备注" width="100" align="center">
          <template slot-scope="scope">{{scope.row.remark}}</template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
        <!-- 新增仓库的弹窗 -->
    <el-dialog title="新增仓库" :visible.sync="isNewDepotOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form ref="newForm" :model="newForm" style="width:25rem;" :rules="newFormRules" >
            <el-form-item label="仓库名称" prop="name" required label-width="5rem">
                <el-input v-model="newForm.name" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="仓库地址" prop="address" label-width="5rem">
                <el-input v-model="newForm.address" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="taxRate" label-width="5rem">
                <el-input v-model="newForm.taxRate" type="number" placeholder="请输入正整数" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="仓储费" prop="warehousing" label-width="5rem">
                <el-input v-model="newForm.warehousing" placeholder="" style="width:15rem;"></el-input>/元/天/KG
            </el-form-item>
            <el-form-item label="搬运费" prop="truckage"  label-width="5rem">
                <el-input v-model="newForm.truckage" placeholder="" style="width:16rem;"></el-input>元
            </el-form-item> -->
            <!-- <el-form-item label="负责人" prop="principal"  label-width="5rem">
                <el-input v-model="newForm.principal" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="默认" prop="principal"  label-width="5rem">
                <el-input v-model="newForm.principal" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
            <el-form-item label="是否默认" prop="isDefault" label-width="5rem">
              <el-switch v-model="newForm.isDefault" :active-value="true" :inactive-value="false"></el-switch>
            </el-form-item>
            <el-form-item label="排序" prop="sort" label-width="5rem">
                <el-input v-model="newForm.sort" type="number" placeholder="请输入正整数" style="width:16.66rem;"></el-input>
            </el-form-item>
             <el-form-item label="备注" prop="remark" label-width="5rem">
                <el-input v-model="newForm.remark" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleSaveNewDepot('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isNewDepotOpen = false">关闭</el-button>
        </div>
    </el-dialog>

    <!-- 编辑仓库的弹窗 -->
    <el-dialog title="编辑仓库" :visible.sync="isUpdateDepotOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="editForm" style="width:25rem;" :rules="editFormRules" >
            <el-form-item label="仓库名称" prop="name" required label-width="5rem">
                <el-input v-model="editForm.name" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="仓库地址" prop="address" required label-width="5rem">
                <el-input v-model="editForm.address" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="taxRate" label-width="5rem">
                <el-input v-model="editForm.taxRate" type="number" placeholder="请输入正整数，比如13%的税率填写13即可" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="仓储费" prop="warehousing" label-width="5rem">
                <el-input v-model="editForm.warehousing" placeholder="" style="width:16.66rem;"></el-input>/元/天/KG
            </el-form-item>
            <el-form-item label="搬运费" prop="truckage"  label-width="5rem">
                <el-input v-model="editForm.truckage" placeholder="" style="width:16.66rem;"></el-input>元
            </el-form-item> -->
             <!-- <el-form-item label="负责人" prop="principal"  label-width="5rem">
                <el-input v-model="editForm.principal" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
            <el-form-item label="是否默认" prop="isDefault" label-width="5rem">
              <el-switch v-model="editForm.isDefault" :active-value="true" :inactive-value="false"></el-switch>
            </el-form-item>
            <el-form-item label="排序" prop="sort" label-width="5rem">
                <el-input v-model="editForm.sort" type="number" placeholder="请输入正整数"  style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" label-width="5rem">
                <el-input v-model="editForm.remark" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleSaveUpdateDepot('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isUpdateDepotOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <div class="batch-operate-container">
      <!-- <el-select
        size="small"
        v-model="operateType" placeholder="批量操作">
        <el-option
          v-for="item in operates"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <el-button
        style="margin-left: 20px"
        class="search-button"
        @click="handleBatchOperate()"
        type="primary"
        size="small">
        确定
      </el-button>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {fetchList, createDepository, deleteDepository, updateDepository} from '@/api/depository'

  export default {
    name: 'depotList',
    data() {
      return {
        // operates: [
        //   {
        //     label: "显示仓库",
        //     value: "showBrand"
        //   },
        //   {
        //     label: "隐藏仓库",
        //     value: "hideBrand"
        //   }
        // ],
        newForm:{
            name:"",
            address:"",
            taxRate:"",
            warehousing:999,
            truckage:999,
            principal:"",
            isDefault:0,
            sort:null,
            remark:""
        },
        newFormRules:{
            name:[
                { required: true,  message: '仓库名称不能为空', trigger: ['blur','change']}
            ],
            address:[
                { required: false,  message: '仓库地址不能为空', trigger: ['blur','change']}
            ],
            taxRate:[
                { required: false,  message: '税率不能为空', trigger: ['blur','change']}
            ],
            warehousing:[
                { required: true,  message: '仓库费不能为空', trigger: ['blur','change']}
            ],
            truckage:[
                { required: true,  message: '搬运费不能为空', trigger: ['blur','change']}
            ],
            principal:[
                { required: true,  message: '负责人不能为空', trigger: ['blur','change']}
            ],
            isDefault:[
                { required: false,  message: '请选择是否为默认仓库', trigger: ['blur','change']}
            ],
            sort:[
                { required: false,  message: '排序', trigger: ['blur','change']}
            ],
            remark:[
                { required: false,  message: '备注', trigger: ['blur','change']}
            ],
        },
         editForm:{
            name:"",
            address:"",
            taxRate:"",
            warehousing:999,
            truckage:999,
            principal:"",
            isDefault:0,
            sort:null,
            remark:""
        },
        editFormRules:{
            name:[
                { required: true,  message: '仓库名称不能为空', trigger: ['blur','change']}
            ],
             address:[
                { required: false,  message: '仓库地址不能为空', trigger: ['blur','change']}
            ],
            warehousing:[
                { required: false,  message: '仓库费不能为空', trigger: ['blur','change']}
            ],
            truckage:[
                { required: true,  message: '搬运费不能为空', trigger: ['blur','change']}
            ],
            principal:[
                { required: true,  message: '负责人不能为空', trigger: ['blur','change']}
            ],
             isDefault:[
                { required: false,  message: '请选择是否为默认仓库', trigger: ['blur','change']}
            ],
            sort:[
                { required: false,  message: '排序', trigger: ['blur','change']}
            ],
            remark:[
                { required: false,  message: '备注', trigger: ['blur','change']}
            ],
        },
        isNewDepotOpen:false,
        isUpdateDepotOpen:false,
        operateType: null,
        listQuery: {
          keyword: null,
          pageNum: 1,
          pageSize: 10
        },
        list: null,
        total: null,
        listLoading: true,
        multipleSelection: []
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data;
          this.total = response.data.total;
          this.totalPage = response.data.totalPage;
          this.pageSize = response.data.pageSize;
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleAdd(index, row) {
       // this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
      
       this.isNewDepotOpen =true;
      },
      handleUpdate(index, row){
          let self = this;
          self.isUpdateDepotOpen = true;
          self.editForm.currentId = row.id;
          self.editForm= Object.assign(self.editForm ,row);
          console.log(self.editForm);
      },
      handleSaveUpdateDepot(){
        let self = this;
        console.log(self.editForm);
        updateDepository(self.editForm.currentId,self.editForm).then(res=>{
            if(res.code ==200){
                self.$message({
                    message:"修改成功",
                    type: 'success',
                    duration: 1000
                });
                self.isUpdateDepotOpen = false;
                self.getList();
            }
        })
      },
      handleDelete(index, row) {
        this.$confirm('是否要删除该仓库', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDepository(row.id).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            this.getList();
          });
        });
      },
      handleSaveNewDepot:function(){
          let self = this;
        //   self.newForm.type=1;
        //   self.newForm.isDefault =true;
          //console.log(self.newForm);
          if(self.newForm.taxRate == ""){
            self.newForm.taxRate  = 0;
          }
          if(self.newForm.sort ==""){
            self.newForm.sort = 0;
          }
          createDepository(self.newForm).then(res=>{
              if(res.code ==200){
                self.$message({
                    message: '新建成功',
                    type: 'success',
                    duration: 1000
                  });
                this.$refs['newForm'].resetFields();
                self.isNewDepotOpen = false;
                self.getList();
              }
          })
      },
      handleFactoryStatusChange(index, row) {
        var data = new URLSearchParams();
        data.append("ids", row.id);
        data.append("factoryStatus", row.factoryStatus);
        updateFactoryStatus(data).then(response => {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000
          });
        }).catch(error => {
          if (row.factoryStatus === 0) {
            row.factoryStatus = 1;
          } else {
            row.factoryStatus = 0;
          }
        });
      },
      handleShowStatusChange(index, row) {
        let data = new URLSearchParams();
        ;
        data.append("ids", row.id);
        data.append("showStatus", row.showStatus);
        updateShowStatus(data).then(response => {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000
          });
        }).catch(error => {
          if (row.showStatus === 0) {
            row.showStatus = 1;
          } else {
            row.showStatus = 0;
          }
        });
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      searchBrandList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleBatchOperate() {
        console.log(this.multipleSelection);
        if (this.multipleSelection < 1) {
          this.$message({
            message: '请选择一条记录',
            type: 'warning',
            duration: 1000
          });
          return;
        }
        let showStatus = 0;
        if (this.operateType === 'showBrand') {
          showStatus = 1;
        } else if (this.operateType === 'hideBrand') {
          showStatus = 0;
        } else {
          this.$message({
            message: '请选择批量操作类型',
            type: 'warning',
            duration: 1000
          });
          return;
        }
        let ids = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id);
        }
        let data = new URLSearchParams();
        data.append("ids", ids);
        data.append("showStatus", showStatus);
        updateShowStatus(data).then(response => {
          this.getList();
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000
          });
        });
      },
      addBrand() {
        this.$router.push({path: '/pms/addBrand'})
      }
    }
  }
</script>
<style scoped>
.btn-add{
  margin-top: -8px;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem !important;
} 
</style>


